<template>
  <ul class="header">
    <li @click="current = 1" :class="{ current: current === 1 }" >
      vue基础测试
    </li>
    <li @click="current = 2" :class="{ current: current === 2 }">
      vue动画和过渡测试
    </li>
    <li @click="current = 3" :class="{ current: current === 3 }">
      vue高级测试
    </li>
    <li @click="current = 4" :class="{ current: current === 4 }">
      vue高阶和组合api
    </li>
    <li @click="current = 5" :class="{ current: current === 5 }">插件测试</li>
  </ul>
  <HelloWorld
    v-show="current === 1"
    msg="Hello Vue 3.0 + Vite"
    :class="{ test1: true }"
    abin="good"
  />
  <Index2 v-show="current === 2" />
  <Index3 v-show="current === 3" />
  <Index4 v-show="current === 4" />
  <Index5 v-show="current === 5" />
</template>

<script>
import HelloWorld from "./page1/HelloWorld.vue";
import Index2 from "./page2/Index.vue";
import Index3 from "./page3/Index.vue";
import Index4 from "./page4/Index.vue";
import Index5 from "./page5/Index.vue";

export default {
  name: "App",
  data() {
    return {
      current: 4,
    };
  },
  components: {
    HelloWorld,
    Index2,
    Index3,
    Index4,
    Index5,
  },
};
</script>
<style  scoped>
.header {
  display: flex;
  line-height: 50px;
  background: blue;
  color: white;
}
.header li {
  margin-right: 20px;
  cursor: pointer;
}
.current {
  color: red;
}
</style>
